@import "font-awesome.css";
@import "prism.css";

:root[theme=light] {--kui-bgcolor:#ffffff;--kui-color:#596172;--kui-border-color:#f0f0f0;}
:root[theme=dark]  {--kui-bgcolor:#202020;--kui-color:#d8d8d8;--kui-border-color:rgba(253, 253, 253, 0.12);}

/*Common*/
body, .kui-nav, .kui-background, .kui-install-form {background-color:var(--kui-bgcolor);color:var(--kui-color);}
.kui-nav, .kui-background {border-radius:5px;}
.kui-header {display:flex;justify-content:space-between;padding:0 10px;}
.kui-nav {margin:10px 0 10px 10px;padding:10px 20px;}
.kui-background {min-height:360px;}
.kui-top {display:flex;justify-content:space-between;}
.kui-table {padding:10px 10px 0 10px;}
.kui-caption {font-weight:bold;font-size:1rem;margin:5px;padding:2px 10px;border-left:5px solid #1890ff;}
.kui-link {color:#1890ff;cursor:pointer;}
.kui-menu li {list-style:none;display:inline-block;margin-left:10px;}
.kui-menu li a {color:var(--kui-color);}
.primary {color:#1890ff;}
.danger {color:#ed4014;}
.center {text-align:center;}
.p10 {padding:10px;}

/*Grid*/
.kui-row {display:grid;grid-template-columns:repeat(auto-fit,minmax(0%,1fr));grid-column-gap:10px;}
.kui-row-19, .kui-row-28, .kui-row-37, .kui-row-46, .kui-row-56, .kui-row-64, .kui-row-73, .kui-row-82, .kui-row-91 {
    display:grid;grid-column-gap:10px;
}
.kui-row-19 {grid-template-columns:10% auto;}
.kui-row-28 {grid-template-columns:20% auto;}
.kui-row-37 {grid-template-columns:30% auto;}
.kui-row-46 {grid-template-columns:40% auto;}
.kui-row-56 {grid-template-columns:50% auto;}
.kui-row-64 {grid-template-columns:60% auto;}
.kui-row-73 {grid-template-columns:70% auto;}
.kui-row-82 {grid-template-columns:80% auto;}
.kui-row-91 {grid-template-columns:90% auto;}

/*Form*/
.kui-steps-content {
    margin-top:16px;padding:10px;background-color:var(--kui-bgcolor);
    border:1px dashed var(--kui-border-color);
    border-radius:6px;min-height:200px;
}
.kui-form-content {padding:10px;}
.kui-form-action {margin-top:24px;text-align:right;}
.kui-form-action button {margin-left:8px;}
.kui-form-page {padding:10px 50px 20px 0;}
.kui-form-page-button {margin-left:16.66666667%;}
.kui-form-page-button button {margin-right:10px;}

/*GroupBox*/
.kui-group-box {position:relative;border:1px dashed var(--kui-border-color);border-radius:6px;}
.kui-group-box .legend {position:absolute;top:-10px;left:20px;padding:0 10px;}
.kui-group-box .body {padding:1rem;}

/*ListBox*/
.kui-list-box {margin:10px;padding:1px;overflow:auto;height:100%;min-height:200px;}
.kui-list-box li {position:relative;padding:5px 10px;cursor:pointer;border-left:3px solid transparent;}
.kui-list-box li:hover {background-color:#f1f1f1;}
.kui-list-box li.active {background-color:#bae7ff;color:#1890ff;border-left-color:#1890ff;}

:root[theme=dark] .kui-list-box li:hover, :root[theme=dark] .kui-list-box li.active {background-color:rgba(255, 255, 255, 0.08);}

/*EditInput*/
.kui-edit-input {display:flex;}
.kui-edit-input input {width:190px;}
.kui-edit-input .kui-link {margin-left:10px;display:flex;align-items:center;}

/*Search*/
.kui-advanced-search .item {display:flex;margin-top:10px;}

/*Pick*/
.kui-pick, .kui-pick-clear {
    position:absolute;top:0;right:0;cursor:pointer;text-align:center;
    display:block;width:32px;height:32px;line-height:32px;
}
.kui-pick-clear {right:28px;}
.kui-icon-picker {position:relative;height:300px;}
.kui-icon-picker .search {position:absolute;top:0;left:0;right:0;}
.kui-icon-picker .items {position:absolute;top:35px;left:0;bottom:0;right:0;overflow:auto;}
.kui-icon-picker .item {display:inline-block;font-size:2rem;width:80px;text-align:center;margin:2px;}
.kui-icon-picker .item.active {font-weight:bold;color:#1890ff;}
.kui-icon-picker .item .name {display:block;font-size:1rem;height:1rem;line-height:1rem;overflow:hidden;}

/*Flow*/
.kui-flow .kui-group-box {padding:10px;background-color:var(--kui-bgcolor);}
.kui-flow .kui-group-box .legend {font-weight:bold;font-size:1.1rem;}

@media screen and (max-width:768px) {
    .kui-top {flex-direction:column;}
    .kui-logo {margin-left:6px;}
    .kui-app-name {display:none;}
    .kui-header {flex-direction:column;padding:0;}
    .kui-nav {justify-content:flex-end;margin:10px;padding:10px;}
    .kui-form-page {padding:10px 10px 20px 10px;}
    .kui-form-page-button {margin-left:0;}
    .kui-row-19, .kui-row-28, .kui-row-37, .kui-row-46, .kui-row-56, .kui-row-64, .kui-row-73, .kui-row-82, .kui-row-91 {
        grid-template-columns:100%;grid-row-gap:10px;
    }
}

/*Install*/
.kui-install {position:absolute;left:0;right:0;}
.kui-install .button {text-align:center;}
.kui-install-head {display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:1.5rem;padding:30px 200px;}
.kui-install-head .kui-menu {margin:0;padding:0;padding-top:13px;}
.kui-install-body {background:linear-gradient(135deg, #6da0f5, #c0e9fc);height:500px;padding:50px 200px;}
.kui-install-form {border-radius:5px;box-shadow:0 0 10px 3px rgba(0,0,0,.3);padding:20px;width:500px;height:400px;margin:0 auto;}
.kui-install-foot {text-align:center;width:100%;font-size:1.1rem;margin-top:30px;}
.kui-install-foot span {margin:0 5px;}

@media screen and (max-width:1200px) {
    .kui-install-head, .kui-install-body {padding-left:100px;padding-right:100px;}
}
@media screen and (max-width:768px) {
    .kui-install {top:50%;margin-top:-320px;}
    .kui-install-head {padding:20px;}
    .kui-install-body {padding:0 30px;grid-template-columns:100%;height:auto;}
    .kui-install-form {padding-left:0;padding-bottom:30px;}
    .kui-install-foot {margin-top:20px;}
}

:root[theme=dark] .kui-install-body {background:linear-gradient(135deg, rgb(45, 46, 46), rgb(40, 41, 41));}

/*UserProfile*/
.kui-user-avatar {text-align:center;}
.kui-user-avatar img {width:100px;height:100px;margin:20px auto;}
.kui-user-info {padding:20px;}
.kui-user-info li {list-style:none;text-align:justify;margin-bottom:10px;}
.kui-user-info li span {color:var(--kui-color);font-size:0.9rem;}

/*Import*/
.kui-import {grid-template-rows:20px 50px auto;}
.kui-import .item {display:flex;margin:8px 0;align-items:center;}
.kui-import .item input {display:inline-block;border:1px solid var(--kui-border-color);}
.kui-import .item .async {margin-left:10px;}
.kui-import .kui-link {margin-right:10px;}
.kui-import .size {margin-left:10px;}
.kui-import-message {padding:10px 0;}

/*File*/
.kui-form-files {margin-top:5px;}
.kui-form-files span {margin-right:5px;}

/*Setting*/
.kui-form-setting button {margin:0 5px;}

/*Dictionary*/
.kui-dict-search {margin:10px 10px 0 10px;}

/*Module*/
.kui-module-icon {position:absolute;top:5px;left:5px;z-index:101;}
.kui-module-icon + input {padding-left:20px;}

/*Role*/
.kui-role {display:flex;}
.kui-role-form {width:400px;padding-right:20px;}
.kui-role-module {width:260px;}
.kui-role-button {background-color:var(--kui-bgcolor);width:160px;}
.kui-role-column {background-color:var(--kui-bgcolor);width:160px;}

@media screen and (max-width:768px) {
    .kui-role {flex-direction:column;}
    .kui-role-form, .kui-role-module, .kui-role-button, .kui-role-column {width:100%;}
}

/*----Designer begin----*/
/*Layout*/
.kui-page-designer {position:fixed;right:10px;bottom:10px;font-size:1rem;cursor:pointer;}
.kui-designer {display:grid;grid-template-columns:220px auto 220px;min-height:300px;}
.kui-designer.entity {grid-template-columns:40% auto;}
.kui-designer-tips {padding:2px;background-color:#f2e595;color:#666;text-align:center;border-radius:5px 5px 0 0;}

/*Style*/
.kui-designer .caption {display:flex;height:46px;line-height:46px;border-bottom:1px solid var(--kui-border-color);}
.kui-designer .caption .title {font-weight:bold;padding:0 10px;}
.kui-designer .caption .select {width:150px;}
.kui-designer .bold {font-weight:bold;}

.kui-designer .columns, .kui-designer form {padding:10px;}
.kui-designer .columns, .kui-designer .property {height:460px;overflow:auto;}
.kui-designer .columns .item {padding:0 5px;}
.kui-designer .columns .item.active {background-color:#1890ff;color:#fff;}

/*Model*/
.kui-designer .panel-model {border-right:1px solid var(--kui-border-color);}
.kui-designer .panel-model .item {display:flex;margin-bottom:5px;cursor:pointer;}
.kui-designer .panel-model .item > span {padding-left:5px;}
.kui-designer.entity .panel-model pre {margin:0;padding:10px;}

/*View*/
.kui-designer .panel-view {overflow:auto;}
.kui-designer .panel-view .view {max-height:300px;overflow:auto;}
.kui-designer .panel-view .view .ant-query, 
.kui-designer .panel-view .view .ant-toolbar {padding:0;}
.kui-designer .panel-view .view .ant-toolbar {padding-right:10px;padding-top:10px;}
.kui-designer .panel-view .setting-row {display:grid;grid-template-columns:33% 33% auto;margin-bottom:10px;}
.kui-designer .panel-view .setting .item {display:grid;grid-template-columns:80px auto;height:32px;align-items:center;margin:0 10px 10px 0;}
.kui-designer .list-view {padding:0 10px;}
.kui-designer form {padding-right:50px;}

/*Property*/
.kui-designer .panel-property {border-left:1px solid var(--kui-border-color);}
.kui-designer .panel-property .item {display:grid;margin:10px;grid-template-columns:80px auto;height:32px;align-items:center;}
.kui-designer .panel-property .item label {text-align:right;padding-right:15px;}

/*Code*/
.kui-code {margin:0 0 0 10px;border-left:3px solid var(--kui-border-color);height:445px;overflow:auto;}
.kui-code-action {position:absolute;top:-50px;right:0;}
.kui-designer.entity .kui-code, .kui-code pre[class*=language-] {margin:0;}

/*AntDesign*/
.kui-designer.entity .panel-view .ant-tabs-content-holder {padding-left:10px;}
.kui-designer .panel-view .setting .ant-tabs-content-holder {padding:0 10px;}
.kui-designer .panel-view .ant-steps {padding:0 30px 10px 30px;}
.kui-designer .panel-property .item .ant-switch {width:44px;}
/*----Designer end----*/